import { DocsSidebarNav } from "~/components/sidebar-nav"
import { ScrollArea } from "~/components/ui/scroll-area"
import { docsConfig } from "~/config/docs"
import type { SidebarNavItem } from "~/types/nav"

interface DocsLayoutProps {
   children: React.ReactNode
}

export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
      <div className="container flex-1 items-start md:grid md:grid-cols-[240px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[250px_minmax(0,1fr)] lg:gap-10">
         <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
            <ScrollArea className="h-full pr-6">
               <DocsSidebarNav
                  items={docsConfig.sidebarNav as SidebarNavItem[]}
               />
            </ScrollArea>
         </aside>
         {children}
      </div>
   )
}
